<template>
  <div>
    <h1>【aty-panel】 component demo</h1>
    <p>【aty-panel】本质是一个div,开发者可以在里面放任意任意元素</p>
    <aty-panel v-for="(item,index) in [1,2,56,6]" v-text="'height:50px;'"
               height="50px"
               :key="item" />
    <aty-panel width="300px" height="100px" hasBorder><h3>width:300px; <br />  height:100px;  <br /> border:1px solid #dddee1;</h3></aty-panel>
    <aty-panel><p>放一个p标签</p></aty-panel>
    <aty-panel><em>放一个em元素</em></aty-panel>
    <aty-panel class="fd-panel-01"><em>放一个em元素</em><aty-panel>嵌套 aty-panel</aty-panel></aty-panel>
    <aty-panel class="fd-panel-02"><em>放一个em元素</em><aty-panel>嵌套 aty-panel<aty-panel>深层嵌套 aty-panel</aty-panel></aty-panel></aty-panel>
  </div>
</template>
<script>
//  import { Alert, Icon } from 'Artery';
export default {
  //  components: { Alert, Icon }
}
</script>
<style scoped  lang="less" type="text/less"  >
    .fd-panel-01 {
        margin:  10px;
        padding: 20px;
        border: 1px solid #d7dde4;
        >.aty-panel{
             margin: 10px 0;
             padding: 5px;
             border: 1px solid #d7dde4;
         }
    }

    .fd-panel-02 {
        margin:  10px;
        padding: 20px;
        border: 1px solid #3399ff;
        >.aty-panel{
             margin:  10px;
             padding: 20px;
             border: 1px solid #00cc66;
                >.aty-panel{
                     margin:  10px;
                     padding: 20px;
                     border: 1px solid #ff9900;
                 }
         }
    }
</style>
